<template>
  <div class="Detail">
    <div class="mixin">
      <div class="left1">
        <div
          class="left"
          :style="isFixed ? { position: 'fixed', top: '20px' } : {}"
        >
          <div class="menu-list">
            <button
              v-for="(item, index) in menuItems"
              :key="index"
              class="menu-item"
              :class="{ active: currentMenu === item.value }"
              @click="handleMenuClick(item.value)"
            >
              {{ item.label }}
            </button>
          </div>
        </div>
      </div>

      <div class="dashboard">
        <div class="fenxi" id="quan">可视化统计分析-检索结果</div>

        <!-- 全部内容（各图表区域添加锚点ID） -->
        <template>
          <!-- 主题分布：锚点ID=theme -->
          <div class="chart-item" id="theme">
            <div class="cc">
              <div class="chart-title">主题分布</div>
            </div>
            <div>
              <rose-chart :chart-data="customData" />
            </div>
          </div>
          <!-- 时间分布：锚点ID=time -->
          <div class="chart-item" id="time">
            <div class="cc">
              <div class="chart-title">时间分布</div>
            </div>
            <div>
              <TrendLineChart :dataSource="markErrorData"></TrendLineChart>
            </div>
          </div>
          <!-- 热门关键词：锚点ID=keywords -->
          <div class="chart-item" id="keywords">
            <div class="cc">
              <div class="chart-title">热门关键词</div>
            </div>
            <div class="ci">
              <WordCloudContainer
                :wordList="wordList"
                :containerStyle="{
                  width: '100%',
                  height: '400px',
                  background: '#f6faff',
                }"
                :cloudConfig="ds"
                @tag-click="goToDetail"
              />
            </div>
          </div>
          <!-- 人物分布：锚点ID=people -->
          <div class="chart-item" id="people">
            <div class="cc">
              <div class="chart-title">人物分布</div>
            </div>
            <div>
              <TrendBarChart :dataSource="submitData"></TrendBarChart>
            </div>
          </div>
          <!-- 机构分布：锚点ID=institution -->
          <div class="chart-item" id="institution">
            <div class="cc">
              <div class="chart-title">机构分布</div>
            </div>
            <div class="ine">
              <div class="institution">
                <div class="zz">
                  <div class="rank">排名</div>
                  <div class="institution-name">机构</div>
                  <div class="count">文章篇数</div>
                </div>
                <div
                  v-for="(item, index) in institutionData"
                  :key="index"
                  class="table-row"
                  :class="{
                    first: index === 0,
                    second: index === 1,
                    third: index === 2,
                  }"
                >
                  <div class="rank">
                    <span
                      v-if="index < 3"
                      class="rank1"
                      :style="{ backgroundImage: rankColor[index] }"
                    ></span>
                    <div class="raq" v-else>{{ index + 1 }}</div>
                  </div>
                  <div class="institution-name">
                    {{ item.institution }}
                  </div>
                  <div class="count">{{ item.articles }}</div>
                </div>
              </div>
              <div class="institution">
                <div class="zz">
                  <div class="rank">排名</div>
                  <div class="institution-name">机构</div>
                  <div class="count">文章篇数</div>
                </div>
                <div
                  v-for="(item, index) in institutionData"
                  :key="index"
                  class="table-row"
                  :class="{
                    first: index === 0,
                    second: index === 1,
                    third: index === 2,
                  }"
                >
                  <div class="rank">
                    <span
                      v-if="index < 3"
                      class="rank1"
                      :style="{ backgroundImage: rankColor[index] }"
                    ></span>
                    <div class="raq" v-else>{{ index + 1 }}</div>
                  </div>
                  <div class="institution-name">
                    {{ item.institution }}
                  </div>
                  <div class="count">{{ item.articles }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 来源分布：锚点ID=source -->
          <div class="chart-item" id="source">
            <div class="cc">
              <div class="chart-title">来源分布</div>
            </div>
            <div class="ine">
              <div class="institution">
                <div class="zz">
                  <div class="rank">排名</div>
                  <div class="institution-name">来源</div>
                  <div class="count">文章篇数</div>
                </div>
                <div
                  v-for="(item, index) in institutionData"
                  :key="index"
                  class="table-row"
                  :class="{
                    first: index === 0,
                    second: index === 1,
                    third: index === 2,
                  }"
                >
                  <div class="rank">
                    <span
                      v-if="index < 3"
                      class="rank1"
                      :style="{ backgroundImage: rankColor[index] }"
                    ></span>
                    <div class="raq" v-else>{{ index + 1 }}</div>
                  </div>
                  <div class="institution-name">
                    {{ item.institution }}
                  </div>
                  <div class="count">{{ item.articles }}</div>
                </div>
              </div>
              <div class="institution">
                <div class="zz">
                  <div class="rank">排名</div>
                  <div class="institution-name">机构</div>
                  <div class="count">文章篇数</div>
                </div>
                <div
                  v-for="(item, index) in institutionData"
                  :key="index"
                  class="table-row"
                  :class="{
                    first: index === 0,
                    second: index === 1,
                    third: index === 2,
                  }"
                >
                  <div class="rank">
                    <span
                      v-if="index < 3"
                      class="rank1"
                      :style="{ backgroundImage: rankColor[index] }"
                    ></span>
                    <div class="raq" v-else>{{ index + 1 }}</div>
                  </div>
                  <div class="institution-name">
                    {{ item.institution }}
                  </div>
                  <div class="count">{{ item.articles }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import RoseChart from "../components/chartt/RoseChart.vue";
import TrendLineChart from "@/components/chartt/TrendLineChart.vue";
import TrendBarChart from "@/components/chartt/TrendBarChart.vue";
import WordCloudContainer from "@/components/WordCloudContainer.vue";

export default {
  components: { RoseChart, TrendLineChart, TrendBarChart, WordCloudContainer },
  data() {
    return {
      isFixed: false,
      currentMenu: "all", // 当前选中的菜单项
         isMenuClicking: false, // 菜单点击状态
      menuItems: [
        { label: "全部", value: "all" },
        { label: "主题分布", value: "theme" },
        { label: "时间分布", value: "time" },
        { label: "热门关键词", value: "keywords" },
        { label: "人物分布", value: "people" },
        { label: "机构分布", value: "institution" },
        { label: "来源分布", value: "source" },
      ],
      institutionData: [
        { institution: "湖北经济学院经济与贸易学院", articles: 108 },
        { institution: "西安交通大学管理学院", articles: 98 },
        { institution: "厦门大学东南亚研究中心", articles: 82 },
        { institution: "对外经济贸易大学国际经济贸易学院", articles: 65 },
        { institution: "对外经济贸易大学国际经济贸易学院11111", articles: 43 },
      ],
      ds: {
        shape: "flat",
        radius: 230,
        maxSpeed: "normal",
        initSpeed: "normal",
        direction: 80,
        keep: false,
        pauseOnHover: true,
        freezeDecel: false,
        weight: true,
      },
      customData: [
        { value: 25, name: "产品A" },
        { value: 20, name: "产品B" },
        { value: 30, name: "产品C" },
        { value: 20, name: "产品D" },
        { value: 20, name: "产品E" },
      ],
      submitData: {
        day: {
          xAxis: [
            "09-28",
            "09-29",
            "09-30",
            "10-01",
            "10-02",
            "10-03",
            "10-04",
            "10-05",
            "10-06",
            "10-07",
            "10-08",
            "10-09",
            "10-10",
            "10-11",
            "10-12",
            "10-13",
            "10-14",
          ],
          yAxis: [
            75000, 30000, 60000, 40000, 30000, 45000, 30000, 55000, 40000,
            75000, 40000, 95000, 40000, 80000, 80000, 40000, 55000,
          ],
        },
        week: {
          xAxis: ["第1周", "第2周", "第3周", "第4周"],
          yAxis: [150000, 120000, 180000, 160000],
        },
        month: {
          xAxis: ["1月", "2月", "3月", "4月", "5月", "6月"],
          yAxis: [350000, 420000, 380000, 450000, 410000, 480000],
        },
      },
      markErrorData: {
        day: {
          xAxis: [
            "09-28",
            "09-29",
            "09-30",
            "10-01",
            "10-02",
            "10-03",
            "10-04",
            "10-05",
            "10-06",
            "10-07",
            "10-08",
            "10-09",
            "10-10",
            "10-11",
            "10-12",
            "10-13",
            "10-14",
          ],
          yAxis: [
            20000, 70000, 30000, 60000, 25000, 60000, 25000, 40000, 25000,
            50000, 30000, 50000, 30000, 50000, 30000, 85000, 30000,
          ],
        },
        week: {
          xAxis: ["第1周", "第2周", "第3周", "第4周"],
          yAxis: [150000, 120000, 180000, 160000],
        },
        month: {
          xAxis: ["1月", "2月", "3月", "4月", "5月", "6月"],
          yAxis: [350000, 420000, 380000, 450000, 410000, 480000],
        },
      },
      wordList: [
        "无人机",
        "东风-5C",
        "反导系统",
        "电磁频谱",
        "网络战",
        "高超音速武器",
        "联合作战",
        "太空军事化",
        "航母战斗群",
        "东风-5C",
        "反导系统",
        "电磁频谱",
        "网络战",
        "高超音速武器",
        "联合作战",
        "太空军事化",
        "航母战斗群",
        "东风-5C",
        "反导系统",
        "电磁频谱",
        "网络战",
        "高超音速武器",
        "联合作战",
        "太空军事化",
        "航母战斗群",
        "东风-5C",
        "反导系统",
        "电磁频谱",
        "网络战",
        "高超音速武器",
        "联合作战",
        "太空军事化",
        "航母战斗群",
        "东风-5C",
        "反导系统",
        "电磁频谱",
        "网络战",
        "高超音速武器",
        "联合作战",
        "太空军事化",
        "航母战斗群",
        "东风-5C",
        "反导系统",
        "电磁频谱",
        "网络战",
        "高超音速武器",
        "联合作战",
        "太空军事化",
        "航母战斗群",
        "人工智能作战",
      ],
    };
  },
  computed: {
    rankColor() {
      return [
        `url(${require("@/assets/img/top1.png")})`,
        `url(${require("@/assets/img/top2.png")})`,
        `url(${require("@/assets/img/top3.png")})`,
      ];
    },
    getCurrentTitle() {
      const item = this.menuItems.find(
        (item) => item.value === this.currentMenu
      );
      return item ? item.label : "";
    },
  },
  mounted() {
    const container = document.querySelector(".home");
    if (container) {
      container.addEventListener("scroll", this.handleScroll);
    }
  },
  beforeUnmount() {
    const container = document.querySelector(".home");
    if (container) {
      container.removeEventListener("scroll", this.handleScroll);
    }
  },
  methods: {
    // 菜单点击事件：切换选中状态 + 锚点定位
    handleMenuClick(value) {
       this.isMenuClicking = true; 
      this.currentMenu = value;
      // 1. 点击“全部”时，滚动到页面顶部
      const container = document.querySelector(".home");
      if (value === "all") {
        container.scrollTo({
          top: 0,
          behavior: "smooth", // 平滑滚动
        });
        return;
      }
      // 2. 点击其他菜单时，定位到对应锚点
      const targetDom = document.getElementById(value);
      if (targetDom) {
        const offset = 100; // 设置顶部留白距离
        const targetPosition = targetDom.offsetTop - offset;
        const container = document.querySelector(".home");

        container.scrollTo({
          top: targetPosition,
          behavior: "smooth",
        });
      }
        setTimeout(() => {
    this.isMenuClicking = false;
  }, 700);
    },
    // 滚动监听事件：同步菜单选中状态
    handleScroll() {
      const container = document.querySelector(".home");
      if (container.scrollTop > 529) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
      this.updateCurrentMenuByScroll(container);
    },

   updateCurrentMenuByScroll(container) {
      if (this.isMenuClicking) return;

  const anchorValues = this.menuItems
    .filter((item) => item.value !== "all")
    .map((item) => item.value);

  const containerTop = container.scrollTop;
  const containerHeight = container.clientHeight;
  const offset = 300; // 设置触发偏移量

  for (const value of anchorValues) {
    const anchorDom = document.getElementById(value);
    if (!anchorDom) continue;

    const anchorTop = anchorDom.offsetTop;
    const anchorHeight = anchorDom.offsetHeight;

    // 核心判断：提前offset距离触发菜单切换
    const isInView =
      (anchorTop - offset >= containerTop &&
        anchorTop - offset <= containerTop + containerHeight) ||
      (anchorTop + anchorHeight - offset >= containerTop &&
        anchorTop + anchorHeight - offset <= containerTop + containerHeight);

    if (isInView) {
      this.currentMenu = value;
      break;
    }
  }
},

    // 关键词点击跳转（原逻辑保留）
    goToDetail(item) {
      this.$router
        ? this.$router.push({
            name: "MilitaryDetail",
            params: { id: item.id, title: item.title },
          })
        : alert(`点击查看：${item.title}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.raq {
  font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  color: #8991b0;
}

.rank1 {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: -4px;
  background-size: cover;
}

.ine {
  margin-top: 30px;
  display: flex;
  gap: 20px;

  .zz {
    display: flex;
    margin-bottom: 16px;
  }

  .first {
    background: linear-gradient(270deg, #fff1b4 0%, #fdfdf2 100%) !important;
  }

  .second {
    background: linear-gradient(270deg, #dae4ef 0%, #fdfdfd 100%) !important;
  }

  .third {
    background: linear-gradient(270deg, #fcedde 0%, #fdfcf8 100%) !important;
  }

  .rank {
    width: 90px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #666666;
    text-align: center;
  }

  .institution-name {
    width: 288px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #666666;
  }

  .count {
    width: 88px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #666666;
    text-align: center;
  }

  .institution {
    width: 478px;

    .table-row {
      background: #f5f9ff;
      display: flex;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #333333;
      margin-bottom: 12px;
      padding: 19px 0;
      border-radius: 4px;

      .rank {
        width: 90px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        text-align: center;
      }

      .institution-name {
        width: 288px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        white-space: nowrap;
        /* 禁止换行 */
        overflow: hidden;
        /* 隐藏超出部分 */
        text-overflow: ellipsis;
        /* 显示省略号 */
      }

      .count {
        width: 88px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        text-align: center;
      }
    }
  }
}

.institution-table {
  width: 100%;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}

.menu-list {
  display: flex;
  flex-direction: column;

  .menu-item {
    width: 100%;
    padding: 12px 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: center;
    border-radius: 4px;
    margin-bottom: 12px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;

    &.active {
      background: #327dff !important;
      color: #fff;
    }

    &:hover {
      background: #eef4ff;
    }
  }
}

.fenxi {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 24px;
  color: #333333;
}

.dashboard {
  // margin-left: 20px;
  flex: 1;
  padding: 42px 30px;
  background: #ffffff;
  padding-bottom: 48px;

  .chart-item {
    margin-top: 29px;
  }

  .cc {
    width: 170px;

    display: flex;
    align-items: center;
    background: linear-gradient(
      270deg,
      rgba(50, 125, 255, 0) 0%,
      rgba(50, 125, 255, 0.14) 100%
    );
    border-radius: 4px;
    margin-bottom: 12px;
  }

  .chart-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
  }

  .chart-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 24px;
    background: #327dff;
    margin-right: 8px;
  }
}

.left {
  width: 280px;
  height: 410px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  padding: 20px;
}

.left1 {
  width: 320px;
  margin-right: 20px;
}

.Detail {
  padding-top: 24px;
  padding-bottom: 40px;
  display: flex;
  background: #f9faff;
  flex-direction: column;
  align-items: center;

  .mixin {
    width: 1400px;
    display: flex;
  }
}
</style>